<template>
  <div>
    <div style="font-size:14px;font-weight:600;margin-bottom:10px;margin-top:-5px;">主机监控</div>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-select style="width:225px;" v-model="appname" placeholder="请选择" size="small" filterable clearable @change="selectChange">
            <el-option
                v-for="item in appList"
                :key="item.id"
                :label="item.appname"
                :value="item.appname">
                <span style="float: left">{{ item.appname }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
            </el-option>
        </el-select>
        <el-button style="margin-left:10px;" @click="fresh">刷新</el-button>
        <span style="font-size:12px;margin-left:10px;margin-right:10px;border-left: 1px solid #ccc;padding-left:10px;">自动刷新</span>
        <el-switch v-model="isfresh" @change="autofresh"></el-switch>
        <div style="width:100%;height:23px;font-size:12px;padding-top:9px;padding:10px;">
          <div style="display:flex;">
            <div style="width:80px;">主机名称</div>
            <div>{{appInfo.appname}}</div>
          </div>
          <div style="display:flex;">
            <div style="width:80px;">内网IP</div>
            <div>{{appInfo.innerIp}}</div>
          </div>
          <div style="display:flex;">
            <div style="width:80px;">备注</div>
            <div>{{appInfo.remark}}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card">
          <div class="card_title">CPU监控</div>
          <div id="cpu_chart" style="height:250px;"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="15" style="margin-top:15px;">
      <el-col :span="12">
        <div class="card" >
          <div class="card_title">内存监控</div>
          <div id="mem_chart" style="height:250px;"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card">
          <div class="card_title">磁盘监控</div>
          <div id="disk_chart" style="height:250px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '../utils/request'
import * as echarts from "echarts";
export default {
  data(){
    return{
      appname:'',
      appList:[],
      isfresh:false,
      appInfo:{},
      appList:[],
      cpuList:[],
      memList:[],
      diskList:[],
      timer: "",
    }
  },
  mounted(){
      this.getAppList();
      // this.timer = setInterval(this.fresh, 10000);
      this.fresh();
  },
  methods:{
    getAppList(){
        var that = this
        http.get(window.SITE_CONFIG['apiURL']+'/api/app/list')
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.appList = res.data;
            this.appname = this.appList[0].appname
            this.selectChange(this.appname)
        }).catch(() => {})
    },
    selectChange(appname){
        var that = this;
        this.appname = appname
        this.appList.forEach(item=>{
            if(item.appname==appname){
                that.appInfo = item;
            }
        });
        this.getCpuList(appname)
        this.getMemList(appname)
        this.getDiskList(appname)
    },
    autofresh(obj){
        if(obj){
            this.timer = setInterval(this.fresh, 5000);
        }else{
            clearInterval(this.timer);
        }
    },
    fresh(){
        var appname = this.appname;
        this.getCpuList(appname)
        this.getMemList(appname)
        this.getDiskList(appname)
    },
    getCpuList(appname){
        http.get(window.SITE_CONFIG['apiURL']+'/api/cpu/list?appname='+appname)
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.cpuList = res.data;
            this.nearlyWeekAppChart(res.data,'cpu_chart')
        }).catch(() => {})
    },
    getMemList(appname){
        http.get(window.SITE_CONFIG['apiURL']+'/api/mem/list?appname='+appname)
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.memList = res.data;
            this.nearlyWeekAppChart(res.data,'mem_chart')
        }).catch(() => {})
    },
    getDiskList(appname){
        http.get(window.SITE_CONFIG['apiURL']+'/api/disk/list?appname='+appname)
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.nearlyWeekAppChart2(res.data,'disk_chart')
        }).catch(() => {})
    },
    nearlyWeekAppChart2(obj,idname){
      var nameList = [];
      var valueList;
      var seriesList = []
      obj.disk.forEach((item,index)=>{
        var ll = obj[item.diskPart]
        valueList = []
        ll.forEach(item2=>{
            if(index==0){
                nameList.push(item2.createDate.slice(11,19))
            }
            valueList.push(item2.usedPercent)
        })
        seriesList.push({
          name: item.diskPart+' 使用率(%)',
          data: valueList,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 2
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          }
        })
      })
      var myChart = echarts.init(document.getElementById(idname));
        var myoption = {
          color: ['#5e7ce0',"#5abcfe", "#20a4fe","#5fe0cf",],
          tooltip: {
            trigger: 'axis',
            backgroundColor:'#343954',
            textStyle:{
              fontSize:12,
              color:'#fff'
            },
            // padding:6,
          },
          grid: {
            left: '2%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: nameList,
              axisLine:{
                lineStyle:{
                  color:"#efefef",
                  width:1
                }
              },
              axisLabel:{
                textStyle:{
                  color:"#000"
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: "使用率",
              nameTextStyle: {
                color: "#aaa",
                nameLocation: "start",
                padding:5
              },
              splitLine:{
                show:true,
                lineStyle:{
                  type:'dashed'
                }
              },
              axisLine: { show: false },
              axisTick: {
                show: false
              },
              axisLabel:{
                formatter: function (value, index) {
                  return value+"%";
                },
              }
            }
          ],
          series: seriesList
        }
      myChart.setOption(myoption)
      myChart.resize();
    },
    nearlyWeekAppChart(list,idname){
        var nameList = [];
        var valueList = [];
        list.forEach(function(v,i){
            nameList.push(v.createDate.slice(11,19))
            valueList.push(v.usedPercent)
        });
        var myChart = echarts.init(document.getElementById(idname));
        var myoption = {
          color: ['#5e7ce0','#80FFA5',  '#37A2FF', '#FF0087', '#FFBF00'],
          tooltip: {
            trigger: 'axis',
            backgroundColor:'#343954',
            textStyle:{
              fontSize:12
            },
            formatter:function (params) {
                return '<div style="color:#fff;">'+params[0].name + '<br>'+ params[0].marker + '使用率：'+params[0].value +'%</div>';
            }
          },
          grid: {
            left: '2%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: nameList,
              axisLine:{
                lineStyle:{
                  color:"#efefef",
                  width:1
                }
              },
              axisLabel:{
                textStyle:{
                  color:"#000"
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: "使用率",
              nameTextStyle: {
                color: "#aaa",
                nameLocation: "start",
                padding:5
              },
              splitLine:{
                show:true,
                lineStyle:{
                  type:'dashed'
                }
              },
              axisLine: { show: false },
              axisTick: {
                show: false
              },
              axisLabel:{
                formatter: function (value, index) {
                  return value+"%";
                },
              }
            }
          ],
          series: [
            {
              name: '使用率',
              type: 'line',
              // stack: 'Total',
              smooth: false,
              lineStyle: {
                width: 2
              },
              showSymbol: false,
              emphasis: {
                focus: 'series'
              },
              data: valueList,
            }
          ]
        }
      myChart.setOption(myoption)
        myChart.resize();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
  }
}
</script>

<style scoped>
.card{
  width:100%;height:300px;
  
  border:1px solid #adb0b8;
}

.card:hover{
  border:1px solid #526ECC;
  box-shadow: 1px 2px 6px 0 rgb(0 0 0/10%)!important;
}

.card_title{
  font-size:12px;
  padding:10px 10px 0 10px;
}

#mem_chart #cpu_chart #disk_chart{
  height:400px;
  width:100%;
}
</style>